<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		 <meta name="decorator" content="center_common" />
		 <style type="text/css">
		em.error {
			height: 35px;
			display: inline-block;
			vertical-align: middle;
			margin-right: 2px;
			background: url("${ctxWebStatic}/images/error_img.png") no-repeat 0px
				0px;
			padding-left: 24px;
			color: #d3001e;
			font-size: 16px;
			font-family: "微软雅黑";
		}
		</style>
		 <script>
		 var validatorAddress;
	$(function(){
		validatorAddress = $("#addressForm").validate({
			onfocusout: function(element) { $(element).valid(); },  
			rules : {
				receive : {required : true,receiveCheck : true,	rangelength:[2,10]},
				phone : {required : true,phoneCheck : true,rangelength:[11,11]},
				address : {required : true,addressCheck : true,	rangelength:[5,50]},
				area : {required : true}
			},
			messages : {
				receive : {required : '请输入收件人',rangelength:'请输入2-10个汉字'},
				phone : {required : '请输入联系方式',rangelength : '格式错误'},
				address : {required : '请输入详细地址',rangelength : '请输入5-50个字符，以汉字开头，可带数字、字母'},
				area : {required : '请选择所在地区'}
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				if (element.is("select")){
					error.insertAfter(element.parents('.tk_selcet'));
				} else {
					error.insertAfter(element);
				}
			},
			errorElement : "em",
			success:function(lable){
	        	lable.remove(); 
        	},
		});
		jQuery.validator.addMethod("receiveCheck", function(value,element, param) { 
	    	var tel = /^[\u4e00-\u9fa5]*$/;  
		 	return this.optional(element) || (tel.test(value));  
        }, $.validator.format("请输入2-10个汉字")); 
	    jQuery.validator.addMethod("phoneCheck", function(value,element, param) { 
	    	var tel = /^[1][3,4,5,7,8][0-9]{9}$/;  
		 	return this.optional(element) || (tel.test(value));  
        }, $.validator.format("格式错误")); 
	    jQuery.validator.addMethod("addressCheck", function(value,element, param) { 
			var tel = /^[\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]*$/;  
		 	return this.optional(element) || (tel.test(value));  
        }, $.validator.format("请输入5-50个字符，以汉字开头，可带数字、字母")); 
		//设为默认
		$(".default_box").click(function(){
			if ($(this).parent().find("i").hasClass("search_chose_hover")) {
				$(this).parent().find("i").removeClass("search_chose_hover");
				$("input[name='isDef']").val("0");
			} else{
				$(this).parent().find("i").addClass("search_chose_hover");
				$("input[name='isDef']").val("1");
			}
			var Inputindex=$('.parts_search_list').index($(this));
			$(".numRadio").find('input').eq(Inputindex).click();
		});
		
		//新增地址
		$(".add_address").click(function(){
			validatorAddress.resetForm();  
			var flag = true;
			$.ajax({
				url:'${ctxWeb}/address/selectByUserId',
				async:false,
				success:function(result){
					if(result!=null){
						if(!(result.length<10)){
							$('#checkShowBoxSpan').text('最多只能添加10个地址，不能继续添加新地址');
							$('#checkShowBox').show();
							flag = false;
						}
					}
				}
			})
			if(!flag){
				return;
			}
			$('.receiveName').val('');
			$('.receivePhone').val('')
			$('.provinceSelect').val('')
			$('.citySelect').val('')
			$('.areaSelect').val('')
			$('.receiveAddress').val('')
			$("#isDef").val("0")
			$('.default_box').find('.search_chose').removeClass('search_chose_hover')
			getProvince();
			$("#proment_new_address").show();	
			/* var listSize=$("#listSize").val();
			if(listSize<11){
			$("#receive").val("");
			$("#phone").val("");
			$("#address").val("");
			$("#addrId").val("");
			$("#province").val("");
			$("#city").find("option").remove();
			var ci="<option value=''>市</option>";
			$("#city").append(ci); 
			
			$("#area").find("option").remove();
			var ci="<option value=''>区</option>";
			$("#area").append(ci); 
			$("#isDef").val("0")
			$(".search_chose").removeClass("search_chose_hover");
			$("#proment_new_address").show();
			}else{
			   	$(".listSize").show();
			    setTimeout(function(){
			    	$(".listSize").hide();
			    }, 2000); 
			} */
		});
		
		$(".close_page").click(function(){
			$("#proment_new_address").hide();
		});

		var that
		$(".js_del").click(function(){
			$("#del_tk").show();
			that=$(this).parents("tr");
		});
		
		$('.cancle').on('click',function(){
	        $("#del_tk").hide();
	   });
	   $('#del_tk .submit').on('click',function(){
	        $("#del_tk").hide();
	         that.remove();
	    })
		//设默认地址
		$(".js_set").click(function(){
			$(this).parents(".table").find(".js_set").removeClass("col_gry ");
			$(this).parents(".table").find(".our_bd").removeClass("our_adress_item ");
			$(this).addClass("col_gry ");
			$(this).parents(".table tr").find(".our_bd").addClass("our_adress_item ");
		});	
	 	//省份下拉框选择事件
		$('.provinceSelect').change(function(){
			var provinceId = $(this).val();
			$.ajax({
				url:'${ctxWeb}/address/selectByParent',
				async:false,
				data:{'id':provinceId},
				success:function(result){
					var html = '<option value="">市</option>';
					if(result!=null){
						for(var i = 0;i<result.length;i++){
							var area = result[i];
							if(area.name.length>4){
								var content = area.name.substring(0,3)+'...';
							}else{
								var content = area.name.substring(0,3);
							}
							html += '<option value="'+area.id+'" title="'+area.name+'">'+content+'</option>'
						}
					}
					$('.citySelect').html(html);
					$('.areaSelect').html('<option value="">区</option>')
				}
			})
		})
		//市级下拉框选择事件
		$('.citySelect').change(function(){
			var cityId = $(this).val();
			$.ajax({
				url:'${ctxWeb}/address/selectByParent',
				async:false,
				data:{'id':cityId},
				success:function(result){
					var html = '<option value="">区</option>';
					if(result!=null){
						for(var i = 0;i<result.length;i++){
							var area = result[i];
							if(area.name.length>4){
								var content = area.name.substring(0,3)+'...';
							}else{
								var content = area.name.substring(0,3);
							}
							html += '<option value="'+area.id+'" title="'+area.name+'">'+content+'</option>'
						}
					}
					$('.areaSelect').html(html)
				}
			})
		})
	})
	
	function getProvince(){
		$.ajax({
			url:'${ctxWeb}/address/getProvince',
			async:false,
			success:function(result){
				var html = '<option value="">省</option>';
				if(result!=null){
					for(var i = 0;i<result.length;i++){
						var area = result[i];
						if(area.name.length>4){
							var content = area.name.substring(0,3)+'...';
						}else{
							var content = area.name.substring(0,3);
						}
						html += '<option value="'+area.id+'" title="'+area.name+'">'+content+'</option>'
					}
				}
				$('.provinceSelect').html(html)
			}
		})
	}
	function sheZhi(v){
	       
		window.location.href="${ctxWeb}/myAddress/sheAddress?id="+v
			
	  }
	
	function deleteShow(v){
		$("#addressId").val(v);
	}
	
	function confirmDelete(){
		var id=$("#addressId").val();
		window.location.href="${ctxWeb}/myAddress/deleteAddress?id="+id
	}
	
	function cityList(){
		var id=$("#province").val();
		$.ajax({
			type:"post",
			url: "${ctxWeb}/myAddress/cityList",
			data:{"id":id},
		    dataType:"json",
		    success:function(data){
		    	if(data!=null){
	            var data=data;
	            $("#city").empty();
		    	$(data).each(function(k,v){
		    		var $option = $("<option>").attr({
                        "value" : v.id
                    }).text(v.name);
		    		
                    $("#city").append($option);
                    $("#city").change();
		    	})
		    		
		    	}
		    }
		})
	}
	
	
	function areaList(){
		var cityId=$("#city").val();
		$.ajax({
			type:"post",
			url: "${ctxWeb}/myAddress/areaList",
			data:{"id":cityId},
		    dataType:"json",
		    success:function(data){
		    	if(data!=null){
	            var data=data;
	            $("#area").empty();
		    	$(data).each(function(k,v){
		    		
		    		var $option = $("<option>").attr({
                        "value" : v.id
                    }).text(v.name);
		    		
                    $("#area").append($option);
                    $("#area").change();
		    	})
		    		
		    	}
		    }
		})
	}
	
	function subt(){
		var id = $('.receiveId').val()
		var receive = $('.receiveName').val()
		var phone = $('.receivePhone').val()
		var province = $('.provinceSelect').val()
		var provinceName = $('.provinceSelect').find("option:selected").text()
		var city = $('.citySelect').val()
		var cityName = $('.citySelect').find("option:selected").text()
		var area = $('.areaSelect').val()
		var areaName = $('.areaSelect').find("option:selected").text()
		var address = $('.receiveAddress').val()
		var isDef = 0;
		if($('.address_Bomb_info').find('.default_box').find('.search_chose').hasClass('search_chose_hover')){
			isDef = 1;
		}
		var checkFlag = true;
		if (!$("#addressForm").valid()) {
			checkFlag = false;
		}
		if (!checkFlag) {
			return false;
		}
		$.ajax({
			url:'${ctxWeb}/address/saveAddress',
			async:false,
			data:{
				'id':id,
				'receive':receive,
				'phone':phone,
				'province':province,
				'provinceName':provinceName,
				'city':city,
				'cityName':cityName,
				'area':area,
				'areaName':areaName,
				'address':address,
				'isDef':isDef
			},
			success:function(result){
				 location.reload();
			}
		})
		/* var receive=$.trim($("#receive").val());
		var phone=$.trim($("#phone").val());
		var address=$.trim($("#address").val());
		if(receive.length<1){
			$("#receSpan").text("不能为空");
			return false;
		}else{
			$("#receSpan").text("");
		}
		if(phone.length<1){
			$("#phoneSpan").text("不能为空");
			return false;
		}else{
			$("#phoneSpan").text("");
		}
		if(!(/^1[34578]\d{9}$/.test(phone))){
			$("#phoneSpan").text("格式不正确");
			return false;
		}else{
			$("#phoneSpan").text("");
		}
		     
		if(address.length<1){
			$("#addressSpan").text("不能为空");
			return false;
		}else{
			$("#addressSpan").text("");
		}
		
		$("#forms").submit(); */
	}
	
	
	function showEdit(v){
		getProvince();
		if(addressId!=null && addressId!=''){
			$.ajax({
				url:'${ctxWeb}/address/getAddress',
				data:{'id':v},
				async:false,
				success:function(result){
					$('.receiveId').val(result.id)
					$('.receiveName').val(result.receive)
					$('.receivePhone').val(result.phone)
					$('.receiveAddress').val(result.address)
					$(".provinceSelect").find("option[value='"+result.province+"']").attr("selected",true);
					$(".provinceSelect").change()
					$(".citySelect").find("option[value='"+result.city+"']").attr("selected",true);
					$(".citySelect").change()
					$(".areaSelect").find("option[value='"+result.area+"']").attr("selected",true);
					if(result.isDef=='1'){
						$('.default_box').find('.search_chose').addClass('search_chose_hover');
						$('#isDef').val('1')
					}else{
						$('.default_box').find('.search_chose').removeClass('search_chose_hover');
						$('#isDef').val('0')
					}
					$("#proment_new_address").show();	
				}
			})
		}
		/* $.ajax({
			type:"post",
			url: "${ctxWeb}/myAddress/showAddressDetail",
			data:{"id":v},
		    dataType:"json",
			success:function(st){
            
				if(st!=null && st!=''){
					$("#receive").val(st.receive);
					$("#phone").val(st.phone);
					$("#address").val(st.address);
					$("#province").val(st.province);
					$("#city").val(st.city);
					$("#area").val(st.area);
					$("#isDef").val(st.isDef);
					$("#addrId").val(st.id);
					$ ("select [id='province'] option" ). each( function () {  
					    if($(this).val()==st.province){  
					    $(this).attr("selected","selected");   
					    return false;          
					}                                   
					})  
					cityList();
					$ ("select [id='city'] option" ). each( function () {  
					    if($(this).val()==st.city){  
					    $(this).attr("selected","selected");   
					    return false;          
					}                                   
					})  
					areaList()
					$ ("select [id='area'] option" ). each( function () {  
					    if($(this).val()==st.area){  
					    $(this).attr("selected","selected");   
					    return false;          
					}                                   
					})  
					 
					if(st.isDef==1){
						
						$(".search_chose").addClass("search_chose_hover");
					}else{
						$(".search_chose").removeClass("search_chose_hover");
					}
				}
				
			} */
	}
    </script>
	</head>
	<body>
	<input value="${listSize}" id="listSize" type="hidden">
	<input id="addressId" name="id" type="hidden"/>
	<!--主题内容-->
	<div class="parts_main_box bgf5">
		<div class="container">
			<div class="row">
				<!-- pc 订单管理 -->
				<div class="Credit_box clearfix">
					<!-- 右边部分 -->
					<div class="col-sm-10 pad20 pad_10">
						<div class="Credit_right">
							<!--我的地址-->
							<div class="goods_detail_info_box mar_16 clearfix">
								<h3>
									<span>全部地址</span>
									<a href="javascript:void(0)" class="add_address">+新增</a>
								</h3>
								<!--我的地址表格-->
								<div class="our_adress_box">
									<div class="our_adress_table  clearfix">
										<table class="table table-bordered">
										    <thead>
											    <tr>
											        <th>收件人</th>
											        <th>电话号码</th>
											        <th>省市区</th>
											        <th>详细地址</th>
											        <th>默认</th>
											        <th>操作</th>
											    </tr>
										    </thead>
										    <tbody>
										       <c:forEach var="list" items="${list }">
											    <tr>
											       <c:if test="${list.isDef==0 }">
											        <td class="our_bd " id="rece">
											        	${list.receive }
											        </td>
											        </c:if>
											        
											        <c:if test="${list.isDef==1 }">
											        <td class="our_bd our_adress_item">
											        	${list.receive }
											        	<i></i>
											        </td>
											        </c:if>
											        
											        <td>${list.phone }</td>
											        <td>${list.provinceName }${list.cityName }${list.areaName }</td>
											        <td>${list.address}</td>
											        <c:if test="${list.isDef==0 }">
											        <td class="color_red  js_set " id="sheZhi" onclick="sheZhi(${list.id})">设置</td>
											        </c:if>
											        <c:if test="${list.isDef==1 }">
											        <td class="color_red  js_set col_gry " id="sheZhi" onclick="sheZhi(${list.id})">设置</td>
											        </c:if>
											        <td class="color_blue">
											        	<a href="javascript:void(0)" class="js_edit" onclick="showEdit(${list.id})">编辑</a>
											        	<a href="javascript:void(0)" class="js_del" onclick="deleteShow(${list.id})">删除</a>   
											        </td>
											    </tr>
											    </c:forEach>
										    </tbody>
										</table>
									</div>
								</div>
								<!--我的地址表格结束-->
							</div>	
							<!--我的地址结束-->
							
						</div>
					</div>
					<!-- 右边部分 end-->
				</div>
				<!-- pc 订单管理 end -->
			</div>
		</div>
	</div>
	<!--主题内容-->
	<!--新增编辑地址弹框-->
	<div class="jd_tk" id="proment_new_address" style="display: none;">
		<form action="${ctxWeb}/myAddress/addSave" method="post" id="addressForm">
		<input type="hidden" id="id" name="id" value="" />
		<div class="address_Bomb">
			<h3 class="address_Bomb_title">
				新增地址
				<span class="close_page">
					<img src="${ctxWebStatic }/images/close.png" alt="" />
				</span>
			</h3>
			<div class="address_Bomb_info clearfix">
				<div class="address_Bomb_left col-sm-9 clearfix">
					<input type="hidden" class="receiveId">
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	收件人：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control receiveName" name="receive" placeholder="请填写收件人">
					    </div>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	联系方式：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control receivePhone" name="phone" placeholder="请填写联系方式">
					    </div>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	所在地区：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<div class="tk_selcet"><!-- container -->									  	
								<select class="hy col-xs-12 col-sm-3 provinceSelect" name="province">
									<option value="">省</option>
								</select>
								<select class="hy col-xs-12 col-sm-3 citySelect" name="city">
									<option value="">市</option>
								</select>
								<select class="hy col-xs-12 col-sm-3 areaSelect" name="area">
									<option value="">区</option>
								</select>
							</div>
					    </div>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	详细地址：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control receiveAddress" name="address" placeholder="请填写详细地址">
					    </div>
					</figure>
				</div>
				<div class="col-sm-3 default_left">
					<div class="default_box">
						<i class="search_chose"></i>
						<span>设为默认地址</span>
						<input name='isDef' id="isDef" type="hidden" />
					</div>
				</div>
			</div>
			<div class="shopping_car_price shopping_car_confirm">
				<a href="javascript:void(0)" onclick="subt()">确认</a>
			</div>
		</div>
		</form>
	</div>
	<%-- <!--新增修改地址弹框-->
	<div class="jd_tk" id="proment_new_address" style="display: none;">
		<div class="address_Bomb">
			<h3 class="address_Bomb_title">
				新增/修改
				<span class="close_page">
					<img src="${ctxWebStatic}/images/close.png" alt="" />
				</span>
			</h3>
			<form action="${ctxWeb}/myAddress/addSave" method="post" id="forms">
			<input name="id"  id="addrId" type="hidden"/>
			<div class="address_Bomb_info clearfix">
				<div class="address_Bomb_left col-sm-9 clearfix">
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	收件人：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control" name="receive" id="receive" maxLength="20">
					    </div>
					     <span id="receSpan" style="color:red"></span>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	联系方式：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control" name="phone" id="phone">
					    </div>
					    <span id="phoneSpan" style="color:red"></span>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	所在地区：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<div data-toggle="distpicker"  class="tk_selcet"><!-- container -->									  	
								<select class="hy col-xs-12 col-sm-3 " data-province="省 " name="province" onchange="cityList()" id="province">
								<option value="">省</option>
								<c:forEach var="provinceList" items="${provinceList }">
								<option value="${provinceList.id }">${provinceList.name }</option>
								</c:forEach>
								</select>
								<select class="hy col-xs-12 col-sm-3 " data-city="市" name="city" id="city" onchange="areaList()">
								<option value="">市</option>
								</select>
								<select class="hy col-xs-12 col-sm-3 " data-district="区" name="area" id="area">
								<option value="">区</option>
								</select>
							</div>
					      	<div class="tk_selcet"><!-- container -->									  	
								<select class="hy col-xs-12 col-sm-3 provinceSelect" name="province">
									<option value="">省</option>
								</select>
								<select class="hy col-xs-12 col-sm-3 citySelect" name="city">
									<option value="">市</option>
								</select>
								<select class="hy col-xs-12 col-sm-3 areaSelect" name="area">
									<option value="">区</option>
								</select>
							</div>
					    </div>
					</figure>
					<figure class="form-group clearfix">
						<label  class="col-sm-3 col-xs-5 fp_lable control-label ">
					    	详细地址：
					    </label>
					    <div class="col-sm-8 col-xs-7 pad0">
					      	<input type="text" class="form-control" name="address" id="address" maxLength="50">
					    </div>
					    <span id="addressSpan" style="color:red"></span>
					</figure>
				</div>
				
				<div class="col-sm-3 default_left">
					<div class="default_box">
						<i class="search_chose"></i>
						<span>设为默认地址</span>
						<input  name='isDef' id="isDef" type="hidden" />
					</div>
					
					<div class='numRadio' style="display: none;">
						<input type='checkbox'  id="isDe"/>
					</div>
				</div>
			</div>
			</form>
			<div class=" shopping_car_price shopping_car_confirm">
				<a href="javascript:void(0)" onclick="subt()">确认</a>
			</div>
		</div>
	</div> --%>
	<!--新增修改地址弹框结束-->
	<!--弹框-->
		<div class="jd_tk" id="del_tk" style="display: none;">
		    <div class="delet_box">
		        <div class="jd_win_tit">你确定删除该地址吗？</div>
		        <div class="jd_btn clearfix">
		            <a href="javascript:void(0)" class="cancle">取消</a>
		            <a href="javascript:void(0)" class="submit" onclick="confirmDelete()">确定</a>
		        </div>
		
		    </div>
		</div>
		
		<div class="jd_tk listSize"  style="display: none;">
		    <div class="delet_box">
		        <div class="jd_win_tit">最多只能有10条地址!</div>
		    </div>
		</div>
	<!--弹框结束-->
	</body>
	
</html>
